<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>
<!-- 生命周期，就是vue在特定时间自动调用的函数，也叫钩子 -->
<body>
    <div id="root">
        <!-- 这里的样式可以只写一个opacity因为两个一样可以简写-->
        <h2 :style="{opacity:opacity}">透明度</h2>
        <button @click="stop">停止变化</button>
        <button @click="stopPro">直接消除vm</button>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        methods: {
            // change(){//要让他不被调用自己就运行，method无法实现，如果用插值调用，那么改变了属性会重写解析模板再次调用插值，形成死循环
            //     setInterval(()=>{
            //         this.opacity-=0.01
            //         if(this.opacity<=0)this.opacity=1
            //     })
            // }
            stop(){
                clearInterval(this.timer)
            },
            stopPro(){
                this.$destroy()
                clearInterval(this.timer)//消除完还要删除定时器
            }
        },
        mounted() {//this指向vm
            let loop = true
            //vue完成模板解析，并且把真实dom放入页面调用（完成挂载）只算第一次，之后的就叫更新
            this.timer=setInterval(()=>{//用vue的属性接一下定时器便于操作
                if(vm.opacity>=1) loop = true
                if(loop){
                    vm.opacity-=0.01
                }
                if(vm.opacity<=0) loop =false
                if(!loop){
                    vm.opacity+=0.01
                }
            },15)
        },
        beforeDestroy() {//如果把消除计时器加在这里更好，因为只要摧毁就会调用这个，无论他是自己调用方法啊摧毁自己还是别人摧毁他，泛用性强
            clearInterval(this.timer)
        },
    })
    // setInterval(()=>{在vue外部不推荐
    //     vm.opacity-=0.01
    //     if(vm.opacity<=0)vm.opacity=1
    // },16)
    </script>
</body>
</html>